<template>
	<view class="template-business-info">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar :bottomShadow="false" backgroundColor="#FFFFFF" customBack fixed>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left-arrow'></text>
			</view>
			<view class="tn-flex tn-flex-col-center tn-flex-row-center">
				<text class="tn-text-bold tn-text-xl tn-color-black">商家资料</text>
			</view>
		</tn-nav-bar>

		<view :style="{paddingTop: vuex_custom_bar_height + 20 +'px'}" class="business-content">
			<scroll-view scroll-y class="business-scroll">
				<!-- 商家基本信息 -->
				<view class="profile-section">
					<view class="profile-header">
						<view class="profile-avatar">
							<image src="/static/images/mine/avatar.svg" mode="aspectFill"></image>
						</view>
						<view class="profile-name">王工程师</view>
						<view class="profile-badge">
							<text class="badge-text">金牌接单者</text>
						</view>
					</view>
					
					<!-- 关键指标 -->
					<view class="metrics-section">
						<view class="metric-item">
							<view class="metric-value">86</view>
							<view class="metric-label">接单数</view>
						</view>
						<view class="metric-item">
							<view class="metric-value">100</view>
							<view class="metric-label">信誉分</view>
						</view>
						<view class="metric-item">
							<view class="metric-value">2年</view>
							<view class="metric-label">接单经验</view>
						</view>
					</view>
				</view>
				
				<!-- 技能标签 -->
				<view class="skills-section">
					<view class="section-header">
						<text class="icon tn-icon-flag tn-color-red"></text>
						<text class="section-title">技能标签</text>
					</view>
					<view class="skills-tags">
						<view class="skill-tag">Java</view>
						<view class="skill-tag">Python</view>
						<view class="skill-tag">微信小程序</view>
						<view class="skill-tag">数据库</view>
						<view class="skill-tag">Web开发</view>
						<view class="skill-tag">Android</view>
						<view class="skill-tag">UI设计</view>
					</view>
				</view>
				
				<!-- 个人简介 -->
				<view class="intro-section">
					<view class="section-header">
						<text class="icon tn-icon-file tn-color-blue"></text>
						<text class="section-title">个人简介</text>
					</view>
					<view class="intro-content">
						拥有5年软件开发经验,精通Java、Python等主流编程语言,擅长微信小程序和Web应用开发。毕业于北京理工大学计算机科学专业,曾在知名互联网公司担任技术主管。对毕业设计有丰富的指导经验,能够提供从需求分析到技术实现的全流程服务。
					</view>
				</view>
				
				<!-- 案例展示 -->
				<view class="cases-section">
					<view class="section-header">
						<text class="icon tn-icon-trophy tn-color-orange"></text>
						<text class="section-title">案例展示</text>
					</view>
					<view class="cases-list">
						<view class="case-item">
							<view class="case-info">
								<view class="case-title">校园二手交易平台</view>
								<view class="case-price">¥2000</view>
								<view class="case-period">实际交付周期: 2025-07-05 - 2025-09-05</view>
							</view>
							<view class="case-status">已完成</view>
						</view>
						
						<view class="case-item">
							<view class="case-info">
								<view class="case-title">智能医疗问诊系统</view>
								<view class="case-price">¥4200</view>
								<view class="case-period">实际交付周期: 2025-07-05 - 2025-09-05</view>
							</view>
							<view class="case-status">已完成</view>
						</view>
						
						<view class="case-item">
							<view class="case-info">
								<view class="case-title">企业人事管理系统</view>
								<view class="case-price">¥5500</view>
								<view class="case-period">实际交付周期: 2025-07-05 - 2025-09-05</view>
							</view>
							<view class="case-status">已完成</view>
						</view>
					</view>
				</view>
				
				<view class="tn-padding-bottom-xl"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import templatePageMixin from '@/libs/mixin/template_page_mixin.js'

export default {
	name: 'BusinessInformation',
	mixins: [templatePageMixin],
	data() {
		return {
			businessInfo: {
				name: '王工程师',
				badge: '金牌接单者',
				avatar: '/static/images/mine/avatar.svg',
				metrics: {
					orderCount: 86,
					creditScore: 100,
					experience: '2年'
				},
				skills: ['Java', 'Python', '微信小程序', '数据库', 'Web开发', 'Android', 'UI设计'],
				introduction: '拥有5年软件开发经验,精通Java、Python等主流编程语言,擅长微信小程序和Web应用开发。毕业于北京理工大学计算机科学专业,曾在知名互联网公司担任技术主管。对毕业设计有丰富的指导经验,能够提供从需求分析到技术实现的全流程服务。',
				cases: [
					{
						title: '校园二手交易平台',
						price: '¥2000',
						period: '2025-07-05 - 2025-09-05',
						status: '已完成'
					},
					{
						title: '智能医疗问诊系统',
						price: '¥4200',
						period: '2025-07-05 - 2025-09-05',
						status: '已完成'
					},
					{
						title: '企业人事管理系统',
						price: '¥5500',
						period: '2025-07-05 - 2025-09-05',
						status: '已完成'
					}
				]
			}
		}
	},
	onLoad(query){
		try{
			if(query && query.merchant){
				const m = JSON.parse(decodeURIComponent(query.merchant))
				this.businessInfo.name = m.nickname || this.businessInfo.name
				this.businessInfo.avatar = m.headSculpture || this.businessInfo.avatar
				this.businessInfo.metrics.orderCount = m.receivingOrdersCount ?? this.businessInfo.metrics.orderCount
				this.businessInfo.metrics.creditScore = m.creditScore ?? this.businessInfo.metrics.creditScore
				this.businessInfo.metrics.experience = m.receivingOrdersDuration ? (m.receivingOrdersDuration + '年') : this.businessInfo.metrics.experience
			}
		}catch(e){
			// ignore parse errors
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.template-business-info {
	background-color: #F8F8F8;
	min-height: 100vh;
	position: relative;
}

.tn-custom-nav-bar__back {
	width: 60%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: 1000rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.5);
	color: #FFFFFF;
	font-size: 18px;

	.icon {
		display: block;
		flex: 1;
		margin: auto;
		text-align: center;
	}
}

.business-content {
	padding: 0 30rpx;
}

.business-scroll {
	height: calc(100vh - 120rpx);
}

.profile-section {
	background-color: #FFFFFF;
	border-radius: 15rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.profile-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 40rpx;
}

.profile-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 20rpx;
	
	image {
		width: 100%;
		height: 100%;
	}
}

.profile-name {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 15rpx;
	text-align: center;
}

.profile-badge {
	display: inline-block;
	padding: 8rpx 20rpx;
	background: linear-gradient(45deg, #FFD700, #FFA500);
	border-radius: 20rpx;
	border: 2rpx solid #FFD700;
	margin-bottom: 30rpx;
	
	.badge-text {
		font-size: 24rpx;
		color: #8B4513;
		font-weight: bold;
	}
}

.metrics-section {
	display: flex;
	justify-content: space-around;
	text-align: center;
}

.metric-item {
	flex: 1;
}

.metric-value {
	font-size: 40rpx;
	font-weight: bold;
	color: #3165CC;
	margin-bottom: 10rpx;
}

.metric-label {
	font-size: 24rpx;
	color: #666;
}

.skills-section {
	background-color: #FFFFFF;
	border-radius: 15rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 25rpx;
	
	.icon {
		font-size: 32rpx;
		margin-right: 15rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
}

.skills-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
}

.skill-tag {
	padding: 12rpx 24rpx;
	background-color: #F0F8FF;
	color: #3165CC;
	border-radius: 20rpx;
	font-size: 26rpx;
	border: 1rpx solid #E6F3FF;
}

.intro-section {
	background-color: #FFFFFF;
	border-radius: 15rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.intro-content {
	font-size: 28rpx;
	color: #666;
	line-height: 1.8;
	text-align: justify;
}

.cases-section {
	background-color: #FFFFFF;
	border-radius: 15rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.cases-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.case-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	background-color: #F8F9FA;
	border-radius: 10rpx;
	border-left: 4rpx solid #3165CC;
}

.case-info {
	flex: 1;
}

.case-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}

.case-price {
	font-size: 28rpx;
	color: #FF6B6B;
	font-weight: bold;
	margin-bottom: 5rpx;
}

.case-period {
	font-size: 24rpx;
	color: #999;
}

.case-status {
	padding: 8rpx 16rpx;
	background-color: #52C41A;
	color: #FFFFFF;
	border-radius: 15rpx;
	font-size: 24rpx;
	font-weight: bold;
}
</style>